<!DOCTYPE html>
<html lang="{% block locale %}{{ data.locale }}{% endblock %}" {% block extraHtml %}{% endblock %}>
  <head>
    {% block startHead %}
    {% endblock %}
    {% component '@apostrophecms/template:inject' with { where: 'head', end: 'prepend', when: 'hmr' } %}
    {% component '@apostrophecms/template:inject' with { where: 'head', end: 'prepend' } %}
    <title>{% block title %}{{ data.piece.title or data.page.title }}{% endblock %}</title>

    {# This call is still here for backwards compatibility, but does nothing #}
    {{ apos.asset.stylesheets(data.scene) }}

    {% block standardHead %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% endblock %}
    {% component '@apostrophecms/template:inject' with { where: 'head', end: 'append', when: 'hmr' } %}
    {% component '@apostrophecms/template:inject' with { where: 'head', end: 'append' } %}
    {% block extraHead %}
    {% endblock %}
  </head>
  <body class="{{ data.aposBodyClasses }} {% block bodyClass %}{% endblock %}"{{ data.aposBodyDataAttributes | safe }}>
    {% component '@apostrophecms/template:inject' with { where: 'body', end: 'prepend', when: 'hmr' } %}
    {% component '@apostrophecms/template:inject' with { where: 'body', end: 'prepend' } %}
    {% block apostropheMenu %}
      {% if data.scene == 'apos' %}
        <div id="apos-busy"></div>
        <div id="apos-admin-bar"></div>
      {% endif %}
    {% endblock %}
    {% block apostropheUserInterface %}
      {% if data.scene == 'apos' %}
        <div id="apos-notification"></div>
      {% endif %}
    {% endblock %}
    <div data-apos-context-label></div>
    <div data-apos-refreshable>
      {% block beforeMain %}{% endblock %}
      {% block mainAnchor %}<a name="main"></a>{% endblock %}
      {% component '@apostrophecms/template:inject' with { where: 'main', end: 'prepend', when: 'hmr' } %}
      {% component '@apostrophecms/template:inject' with { where: 'main', end: 'prepend' } %}
      {% block main %}{% endblock %}
      {% component '@apostrophecms/template:inject' with { where: 'main', end: 'append', when: 'hmr' } %}
      {% component '@apostrophecms/template:inject' with { where: 'main', end: 'append' } %}
      {% block afterMain %}{% endblock %}
    </div>
    {% component '@apostrophecms/template:inject' with { where: 'body', end: 'append', when: 'hmr' } %}
    {% component '@apostrophecms/template:inject' with { where: 'body', end: 'append' } %}
    {% block extraBody %}{% endblock %}
    {% if data.scene == 'apos' %}
      <div id="apos-modals"></div>
      <div id="apos-command-menu"></div>
    {% endif %}
    {# Scripts must load after apos-modal in the DOM #}

    {# This call is still here for backwards compatibility, but does nothing #}
    {{ apos.asset.scripts(data.scene) }}

    {# For project-level webpack injection in dev environments #}
    {% block afterAposScripts %}{% endblock %}
    {# Automatically does nothing in production #}
    {{ apos.asset.refreshOnRestart() }}
  </body>
</html>
